<template>
  <a
    :class="linkCls"
    :href="disabled || !href ? undefined : href"
    :target="disabled || !href ? undefined : target"
    @click="handleClick"
  >
    <span v-if="$slots.default" class="v-link__inner">
      <slot />
    </span>
  </a>
</template>

<script lang="ts">
import { computed, defineComponent, type PropType } from 'vue'

type ILinkType =
  | 'primary'
  | 'success'
  | 'warning'
  | 'info'
  | 'danger'
  | 'default'
type ILinkTarget = '_blank' | '_parent' | '_self' | '_top'

export default defineComponent({
  name: 'VLink',
  props: {
    type: {
      type: String as PropType<ILinkType>,
      default: 'default'
    },
    underline: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    href: {
      type: String,
      default: ''
    },
    target: {
      type: String as PropType<ILinkTarget>,
      default: '_self'
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const linkCls = computed(() => [
      'v-link',
      {
        [`v-link--${props.type}`]: props.type,
        ['is-disabled']: props.disabled,
        ['is-underline']: props.underline
      }
    ])

    function handleClick(event: MouseEvent) {
      if (!props.disabled) emit('click', event)
    }

    return {
      linkCls,
      handleClick
    }
  }
})
</script>

<style src="./style.css"></style>
